<template>
    <div class="i-table-no-border">
        <Card :bordered="false" dis-hover>
            <template #title>
                <div>
                    <Avatar icon="md-locate" size="small" v-color="'#2f54eb'" v-bg-color="'#f0f5ff'" />
                    <span class="ivu-pl-8">前端日志</span>
                </div>
            </template>
            <template #extra>
                <div>
                    <Tooltip content="清空日志" placement="top">
                        <Button type="text" @click="clean">
                            <Icon type="md-trash" size="16" />
                        </Button>
                    </Tooltip>
                </div>
            </template>
            <Table :columns="columns" :data="log">
                <template  #page="{ row }">
                    {{ get(row, 'meta.url') }}
                </template>
                <template  #type="{ row }">
                    <Tag color="blue" v-if="row.type === 'info'">info</Tag>
                    <Tag color="green" v-if="row.type === 'success'">success</Tag>
                    <Tag color="orange" v-if="row.type === 'warning'">warning</Tag>
                    <Tag color="red" v-if="row.type === 'error'">error</Tag>
                </template>
                <template  #more="{ row }">
                    <Button type="primary" @click="handleMore(row)">查看</Button>
                </template>
            </Table>
        </Card>
    </div>
</template>
 <script lang="ts">
    import { defineComponent } from 'vue';
    import { mapState, mapMutations } from 'vuex';
    import { get } from 'lodash';

    export default defineComponent({
        name: 'system-log',
        data () {
            return {
                columns: [
                    {
                        title: '时间',
                        key: 'time',
                        width: 180
                    },
                    {
                        title: '信息',
                        key: 'message',
                        minWidth: 300
                    },
                    {
                        title: '触发页面',
                        slot: 'page',
                        minWidth: 300
                    },
                    {
                        title: '类型',
                        width: 100,
                        slot: 'type'
                    },
                    {
                        title: '详细信息',
                        width: 100,
                        slot: 'more'
                    }
                ]
            }
        },
        computed: {
            ...mapState('admin/log', [
                'log'
            ])
        },
        methods: {
            ...mapMutations('admin/log', [
                'clean'
            ]),
            get,
            handleMore (log) {
                this.$Notice.info({
                    title: '提示',
                    desc: '请在浏览器控制台查看完整日志'
                });
                this['$log'].capsule('Admin Plus', '完整日志内容', 'primary');
                console.group('完整日志');
                console.log('message ', log.message);
                console.log('time: ', log.time);
                console.log('type: ', log.type);
                console.log('meta: ', log.meta);
                console.groupEnd();
            }
        }
    })
</script>
